<ui-component name="form" path="common.form" config="if:~PATH~;title:@(Variables);icon:ti ti-variables;autofocus:true;scrollbar:1;submit:?/submit;width:900" class="hidden" plugin="~PATH~">
	<div class="padding">
		<ui-component name="keyvalue" path="?.variables" config="placeholderkey:@(Type a key);placeholdervalue:@(Type a value and press enter)"></ui-component>
		<div class="help"><i class="ti ti-exclamation-triangle"></i>@(If you enter a variable, you need to confirm it by pressing the <b>ENTER</b> key)</div>
	</div>
	<nav>
		<button name="submit"><i class="ti ti-check-circle"></i>@(SUBMIT)</button>
		<button name="cancel">@(Cancel)</button>
	</nav>
</ui-component>

<script>

	PLUGIN(function(exports) {

		exports.submit = function(hide) {
			var model = exports.model;
			model.callback && model.callback(model.variables);
			hide();
		};

	});

</script>